<template>
	<div class="mine-shopsettle-subsidy-list-wrap" >
		<van-nav-bar
		  title="排队管理"
		  left-arrow
		  fixed
		  @click-left="onClickLeft"
		/>
		
		<div class="tab-ul" >
			<div @click="handleToChange(0)" :class="['tab-li', current == 0 ? 'on' : '']" >排队中</div>
			<div @click="handleToChange(1)" :class="['tab-li', current == 1 ? 'on' : '']" >已完成</div>
		</div>
		
		<div class="line-block" ></div>
		
		<van-list
		  v-model="loadingPage"
		  :finished="finished"
		  :finished-text="list.length ? '没有更多了' : ''"
		  @load="ajaxGoodList"
		>
		
			<div v-if="finished && !list.length" class="empty-good" >
				<van-empty description="暂无排队" />
			</div>
			
			<!-- 排队列表 -->
			<div class="order-ul" >
				<div 
				v-for="(item, index) in list"
				:key="index"
				class="order-li" >
					<div class="order-top" >
						订单编号：{{ item.order_no }}
					</div>
					<div class="order-li-ceil" >
						<div class="order-li-ceil-label" >下单用户</div>
						<div class="order-li-ceil-val" >{{ item.payment_user }}</div>
					</div>
					<div class="order-li-ceil" >
						<div class="order-li-ceil-label" >下单时间</div>
						<div class="order-li-ceil-val" >{{ item.payment_time }}</div>
					</div>
					<div class="order-li-ceil" >
						<div class="order-li-ceil-label" >订单金额</div>
						<div class="order-li-ceil-val" >{{ item.payment }}</div>
					</div>
					<div class="order-li-ceil" >
						<div class="order-li-ceil-label" >应返金额</div>
						<div class="order-li-ceil-val" >{{ item.subsidy }}</div>
					</div>
					<div class="order-li-ceil" >
						<div class="order-li-ceil-label" >已返金额</div>
						<div class="order-li-ceil-val" >{{ item.received }}</div>
					</div>
					<div class="order-li-ceil" >
						<div class="order-li-ceil-label" >当前排名</div>
						<div class="order-li-ceil-val" >{{ item.rank }}</div>
					</div>
					<!-- <div class="order-li-ceil" >
						<div class="order-li-ceil-label" >下单方式</div>
						<div class="order-li-ceil-val" >{{ item.source_type_desc }}</div>
					</div> -->
				</div>
				
			</div>
			
		</van-list>	
		
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				
				// 分页
				page: 1,
				pageSize: 20,
				list: [],
				loadingPage: false,
				finished: false,
			}
		},
		methods: {
		    onClickLeft() {
		        this.$router.back()
		    },
			handleToChange(index) {
				this.current = index;
				
				
				// 数据请求
				this.resetInit();
			},
			resetInit() { //重置
			  this.page = 1;
			  this.list = [];
			  this.finished = false;
			
			  this.loadingPage = true;
			  this.ajaxGoodList()
			},
			// 列表请求
			ajaxGoodList() {
				let params = {};
				params['page_num'] = this.page;
				params['page_size'] = this.pageSize;
				
				params['status'] = this.current;
				
				const id = this.$route.query.id;
				this.$http.get(`/store/manage/${id}/subsidy_list`, {
					params
				})
				.then(res => {
				  const {
				    list
				  } = res.data;
				
				  if(list && list.length) {
				     this.page++;
				     this.list = this.list.concat(list);
				     // 加载状态结束
				     this.loadingPage = false;
				     if(list.length < this.pageSize) {
				      this.finished = true;
				     }
				  }else {
				    this.finished = true;
				  }
				})
			
			}
		}
		
	}
</script>

<style lang="scss" >
	.mine-shopsettle-subsidy-list-wrap{
		position: relative;
		min-height: 100vh;
		padding-top: 46px;
		background-color: #F5F5F5;
		box-sizing: border-box;
		.van-nav-bar .van-icon{
		    color: #333333;
		}
		.van-nav-bar__arrow{
		    font-size: 20px;
		}
		.van-hairline--bottom::after{
		    display: none;
		}
		
		.tab-ul{
			width: 100%;
			position: fixed;
			top: 46px;
			left: 0;
			display: flex;
			align-items: center;
			height: 0.88rem;
			padding: 0 0.32rem;
			background-color: #FFFFFF;
			box-sizing: border-box;
			.tab-li{
				height: 0.88rem;
				line-height: 0.88rem;
				position: relative;
				margin-right: 0.64rem;
				font-weight: 500;
				font-size: 0.28rem;
				color: #666666;
				&.on{
					font-weight: 500;
					color: #F32A23;
					&::after{
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						content: '';
						width: 0.56rem;
						height: 0.06rem;
						background: #F32A23;
						border-radius: 0.03rem;
					}
				}
			}
		}
	
		.line-block{
			height: 0.88rem;
		}
		
		.empty-good{
			padding-top: 1rem;
		}
		.order-ul{
			padding: 0.24rem 0.24rem 0;
			.order-li{
				margin-bottom: 0.2rem;
				padding: 0.28rem 0.32rem;
				border-radius: 0.16rem;
				background-color: #FFFFFF;
				.order-top{
					height: 0.4rem;
					margin-bottom: 0.2rem;
					line-height: 0.4rem;
					font-size: 0.28rem;
					font-weight: 500;
					color: #333333;
				}
				.order-li-ceil{
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 0.36rem;
					margin-bottom: 0.16rem;
					font-size: 0.24rem;
					.order-li-ceil-label{
						color: #666666;
					}
					.order-li-ceil-val{
						color: #333333;
					}
				}
			}
		}
	}
</style>
